<template>
  <div class="box">
    <div class="header" v-if="isDalog || $route.params.isShow">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/goods' }"
          >商品管理</el-breadcrumb-item
        >
        <el-breadcrumb-item :to="{ path: '/addgood' }"
          >添加商品</el-breadcrumb-item
        >
      </el-breadcrumb>
    </div>
    <div class="content">
      <el-form
        :model="ru"
        label-width="150px"
        :rules="rules"
        ref="ru"
        status-icon
      >
        <el-form-item label="类目选择">
          <el-button type="primary" @click="bb">类目选择</el-button>
        </el-form-item>
        <el-form-item label="商品名称" prop="name">
          <el-input v-model="ru.name"></el-input>
        </el-form-item>
        <el-form-item label="商品价格" prop="name">
          <el-input v-model="ru.name"></el-input>
        </el-form-item>
        <el-form-item label="商品数量" prop="name">
          <el-input v-model="ru.name"></el-input>
        </el-form-item>
        <el-form-item label="发布时间">
          <el-col :span="11">
            <el-date-picker
              type="date"
              placeholder="选择日期"
              v-model="ru.date1"
              style="width: 100%"
            ></el-date-picker>
          </el-col>
          <el-col class="line" :span="2">-</el-col
          ><el-col :span="11">
            <el-time-picker
              placeholder="选择时间"
              v-model="ru.date2"
              style="width: 100%"
            ></el-time-picker>
          </el-col>
        </el-form-item>
        <el-form-item label="商品卖点" prop="name">
          <el-input v-model="ru.name"></el-input>
        </el-form-item>
        <el-form-item label="商品图片">
          <el-button type="primary">上传图片</el-button>
        </el-form-item>
        <el-form-item label="活动形式">
          <v-wang></v-wang>
        </el-form-item>
        <el-form-item v-if="isDalog || $route.params.isShow">
          <el-button type="primary" @click="submitForm('ru')">确认</el-button>
          <el-button type="primary" @click="resetForm('ru')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 添加子弹框 -->
    <el-dialog width="30%" title="类目选择" :visible.sync="innerVisible">
      <div>
        <el-tree :props="props" :load="loadNode" lazy show-checkbox> </el-tree>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="innerVisible = false">取 消</el-button>
        <el-button type="primary" @click="innerVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import wangEditor from"../components/wangEditor.vue"
export default {
  mounted() {
    console.log(this.$route);
  },
  components: {
    "v-wang":wangEditor
  },
  props: ["isDalog"],
  data() {
    let va = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入名字"));
      } else {
        callback();
      }
    };
    return {
      ru: {
        name: "",
        data1: null,
        data2: null,
      },
      rules: {
        name: [{ validator: va, trigger: "blur" }, { required: true }],
      },
      innerVisible: false,
      props: {
        label: "name",
        children: "zones",
        isLeaf: "leaf",
      },
    };
  },
  methods: {
    bb() {
      this.innerVisible = true;
    },
    loadNode(node, resolve) {
      if (node.level === 0) {
        return resolve([{ name: "region" }]);
      }
      if (node.level > 1) return resolve([]);

      setTimeout(() => {
        const data = [
          {
            name: "leaf",
            leaf: true,
          },
          {
            name: "zone",
          },
        ];

        resolve(data);
      }, 500);
    },
    submitForm(name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(name) {
      this.$refs[name].resetFields();
    },
  },
};
</script>

<style lang="less" scope>
.box {
  margin: 5px;
  .header {
    padding: 5px;
  }
  .content {
    width: 90%;
    margin-top: 20px;
  }
}
</style>